{% extends base.html %}
<!--
@author xupingmao
@since 2020/01/06
@modified 2021/07/31 10:38:21
-->

{% block body_left %}

<script src="/static/js/note.js"></script>

{% init show_note_path = True %}
{% include note/component/script/create_script.html %}

<div class="card note-list">

    <!-- header -->
    <div class="row card-title btn-line-height">
        <span>笔记本管理</span>
        <div class="float-right">
            <button class="btn btn-default" onclick="xnote.createNotebook()">新建笔记本</button>
            {% include common/button/back_button.html %}
        </div>
    </div>
</div>

<div class="card btn-line-height">
    <span>类目</span>
    <select class="switch-category" value="{{category}}">
        {% for t_cat in category_list %}
            <option value="{{t_cat.code}}">{{t_cat.name}} - (<span>{{t_cat.group_count}}</span>)</option>
        {% end %}
    </select>

    {% if show_category_edit %}
    <div class="float-right">
        <button class="btn btn-default rename-cat-btn">重命名类目</button>
        <!-- <button class="btn btn-default">添加笔记本-TODO</button> -->
    </div>
    {% end %}
</div>

<div class="card">    
    {% if len(files) == 0 %}
        {% include common/text/empty_text.html %}
    {% end %}
    
    {% for item in files %}
        <div class="book-item">
            {% if item.priority>0 %}
                <span class="tag orange">置顶</span>
            {% end %}

            {% if item.priority==0 %}
                <span class="tag info">活跃</span>
            {% end %}
        
            {% if item.priority<0 %}
                <span class="tag system">归档</span>
            {% end %}

            <i class="fa {{item.icon}} fa-{{item.icon}} black"></i>
            <a class="link2" href="{{item.url}}">{{item.name}}</a>
            
            <span class="float-right">
                <select value="{{item.category}}" data-id="{{item.id}}" class="update-category">
                    {% for t_cat in category_list %}
                        <option value="{{t_cat.code}}">{{t_cat.name}}</option>
                    {% end %}
                </select>
                <a class="item-option" data-id="{{item.id}}" data-name="{{item.name}}" 
                    onclick="renameNoteByAttr(this);" href="javascript:void(0);">重命名</a>
                <input type="checkbox" data-id="{{item.id}}" data-name="{{item.name}}"/>
            </span>
        </div>
    {% end %}
</div>

<div class="card">
    {% include common/pagination.html %}
</div>

{% include note/component/script/rename_script.html %}

<script type="text/javascript">

$(".rename-cat-btn").click(function(e) {
    xnote.updateCategoryName({
        code: "{{category_code}}",
        oldName: "{{category_name}}",
    });
})

$(".update-category").change(function (e) {
    var noteId = $(this).attr("data-id");
    var newCat = $(this).val();
    xnote.updateNoteCategory({
        noteId: noteId,
        value: newCat,
        doRefresh: true,
    });
});

$(".switch-category").change(function(e) {
    var selected = $(this).val();
    var url = window.location.href;
    url = xnote.addUrlParam(url, "category", selected);
    window.location.href = url;
});
</script>

{% end %}


{% block body_right %}
    {% include note/component/sidebar/group_manage_sidebar.html %}
{% end %}